<template>
  <div>
    <el-table :data="dataList">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="分路名称">
        <template slot-scope="scope">
          {{ scope.row.title }}({{ scope.row.ln }})
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          {{scope.row.np}}P
        </template>
      </el-table-column>
      <el-table-column label="相">
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.currentarr" :key="index">
            {{ index == 1 ? 'B' : index == 2 ? 'C' : 'A' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="电压(V)">
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.currentarr" :key="index">
            {{ scope.row.voltagearr[index] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="电流(A)">
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.currentarr" :key="index">
            {{ item / 1000 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="功率(W)">
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.currentarr" :key="index">
            {{ scope.row.activepowerArr[index] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="温度(℃)" prop="temperature"></el-table-column>
      <el-table-column label="在线">
      <template slot-scope="scope">        
        <el-switch
          :value="deviceSwitchState[scope.row.lnid]"
          active-color="#13ce66"
          inactive-color="#aaaaaa"
          active-value="1"
          inactive-value="0"    
          @change="changeState(scope.row)"      
        >
        </el-switch>        
        </template>
      </el-table-column>
      <el-table-column label="报警">
        <template slot-scope="scope">
          {{ scope.row.is_alarm ? '报警' : '--' }}
        </template>
      </el-table-column>
      <el-table-column label="统计">
        <template slot-scope="scope">
          <span v-if="scope.row.ele_exception" style="color:red;">异常</span>
          <span v-else>正常</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template slot-scope="scope">
        <el-row :gutter="5" style="margin-bottom: 5px;">
          <el-col :span="6">
            <el-button type="warning" size="mini" @click="openEdit(scope.row)">编辑</el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="mini" @click="openSubset(scope.row)">设置</el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="mini" @click="openSubStatus(scope.row)">状态</el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="success" size="mini" @click="openEreport(scope.row)">用电</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="6">
            <el-button type="success" size="mini" @click="openStatistics(scope.row)">统计</el-button>
          </el-col>
          <!--
          <el-col :span="8">
            <el-button type="primary" size="mini">远程锁控</el-button>
          </el-col>
          -->
          <!--
            分路根本不需要删除功能
            <el-col :span="6">
            <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
          </el-col>-->
        </el-row>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="编辑分路设备" :visible.sync="showEdit" append-to-body>
      <subedit :data="curData" @success="()=>{showEdit = false;getData()}" />
    </el-dialog>

    <el-dialog title="分路用电信息" :visible.sync="showEreport" append-to-body width="80%">
      <ereport :data="curData" @success="()=>{showEreport = false;}" />
    </el-dialog>

    <el-dialog title="分路统计" :visible.sync="showStatistics" append-to-body width="80%">
      <substatistics :subdata="curData" @success="()=>{showStatistics = false;}" />
    </el-dialog>

    <el-dialog title="分路设置" :visible.sync="showSubset" append-to-body>
      <subset :data="curData" :visible="showSubset" />
    </el-dialog>

    <el-dialog title="分路状态" :visible.sync="showSubStatus" append-to-body >
      <substatus :data="curData" :visible="showSubStatus" />
    </el-dialog>
    
  </div>
</template>

<script>
import { mapGetters  } from 'vuex'
import { subdevicepage } from '@/api/equipment/index.js';
import subedit from "./components/subedit.vue"
import ereport from './components/ereport.vue'
import substatistics from "./components/substatistics.vue"
import subset from "./components/subset.vue"
import substatus from "./components/substatus.vue"
import {opertioncmd01,opendeviceone} from "@/api/ws/cmdoper.js"

export default {
  components:{
    subedit,
    ereport,
    substatistics,
    subset,
    substatus
  },
  props: ['deviceid','visible'],
  watch: {
    deviceid: {
      handler: function (val) {
        //console.log(val, 'val');
        if (val) {
          //opertioncmd01(val,"getallbaseinfo", 'CMD-1',1);
          this.getData();
        }
      },
      immediate: true,
    },
    visible:{
      handler:function(val){
        //console.log("visible",val,'到底怎么样')
        if(!val){        
          console.log("清除定时器")
          clearInterval(this.cmdhandler)          
        }else{
          console.log("开始定时")
          opertioncmd01(this.deviceid,"getallbaseinfo", 'CMD-1',1);
          this.cmdhandler = setInterval(()=>{ 
            opertioncmd01(this.deviceid,"getallbaseinfo", 'CMD-1',1);
          },10000)
          
          if(this.deviceid){
            this.getData();
          }
        }
      },
      immediate:true,
    },
    devicebaseinfo:{
      handler:function(val){
        //cmd01获取的数据
        console.log(val,'value')
        let switchs = {}
        let that = this;
        if(val.desired){
          val.desired.arrays.forEach(item=>{
            console.log(item,'item')
            switchs[item.device.id] = item.status.switch+"" 
            console.log(that.deviceSwitchState,item.device.id,item.status.switch,"这个是测试的")
            that.$set(that.deviceSwitchState,item.device.id,item.status.switch+"")
          })
          //this.deviceSwitchState = switchs; //这个更新不能及时显示到界面上呢？要解决。
        }
      },
      deep:true,
      immediate:true,
    }
  },
  computed: {
     ...mapGetters([
      'devicebaseinfo',   
    ]),
  },
  data() {
    return {
      dataList: [],
      showEdit: false,
      showEreport:false,
      showStatistics:false,
      showSubset:false,
      showSubStatus:false,
      curData:{},
      deviceSwitchState:{},
      cmdhandler:null,
    };
  },
  created(){
    
  },
  methods: {
    getData() {
      subdevicepage({ deviceid: this.deviceid }).then((res) => {
        this.dataList = res.data;
        //console.log(res, '分路信息');
      });
    },
    openEdit(row){
      this.curData = row
      this.showEdit = true
      console.log(row)
    },
    openSubset(row){
      this.curData = row
      this.showSubset = true
    },
    openSubStatus(row){
      this.curData = row
      this.showSubStatus = true
    },
    openEreport(row){
      this.curData = row;
      this.showEreport = true;
      console.log(row)
    },
    openStatistics(row){
      this.curData = row;
      this.showStatistics = true;
      console.log(row)
    },
    changeState(row){      
      console.log(row,'看看能不能获取到数据哦')
      if(this.deviceSwitchState[row.lnid] == '1'){        
        opendeviceone(row.deviceid,row.lnid,'CMD-6', 0, 1);
        //this.deviceSwitchState[row.lnid] = 0;
        this.$set(this.deviceSwitchState,row.lnid,"0")
      }else{
        opendeviceone(row.deviceid,row.lnid,'CMD-6', 1, 1);
        //this.deviceSwitchState[row.lnid] = 1;
        this.$set(this.deviceSwitchState,row.lnid,"1")
      }
    }
  },
};
</script>

<style scoped></style>
